---
title: React Floating Label - Flowbite
description: Use the floating label style for the input field elements to replicate the Material UI design system from Google and choose from multiple styles and sizes
---

The floating label style was first pioneered by Google in its infamous Material UI design system and it's basically a label tag which floats just above the input field when it is being focused or already has content inside.

On this page you will find a three different input field styles including a standard, outlined, and filled style including validation styles and sizes coded with Tailwind CSS and supported for dark mod

## Floating label example

Get started with the following three styles for the floating label component and use the label tag as a visual placeholder using the peer-placeholder-shown and peer-focus utility classes from Tailwind CSS.

<Example name="floatingLabel.root" />

## Disabled state

Apply the disabled attribute to the input fields to disallow the user from changing the content.

<Example name="floatingLabel.disabled" />

## Validation

Use the following examples of input validation for the success and error messages by applying the validation text below the input field and using the green or red color classes from Tailwind CSS.

<Example name="floatingLabel.validation" />

## Sizes

Use the small and default sizes of the floating label input fields from the following example.

<Example name="floatingLabel.sizes" />

## Helper text

Add a helper text in addition to the label if you want to show more information below the input field.

<Example name="floatingLabel.helperText" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="floatingLabel" />

## References

- [Flowbite Floating Label](https://flowbite.com/docs/forms/floating-label/)
